<template>
	<view class="page">

		<view>
			<image class="logo" src="../../static/logo.png"></image>

			<view class="padding text-xl">
				为营造一个安全、健康、放心的展览环境，所有进入展会会场的人员需实名制登记。
				<text class="text-orange text-bold ">请提供本人证件上的姓名、证件号及手机号进行登记，</text>
				并且现场通过验证身份证原件方可进入展馆。
			</view>
		</view>

		<view>
			<form>
				<view class="form-tip">
					*必须填写
				</view>
				<view class="cu-form-group">
					<view class="title redxing">姓名</view>
					<input placeholder="请输入姓名" name="input" id="name" v-model="member['name']"
						@input="changeInput"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title redxing">证件类型</view>
					<picker @change="selectCardType" v-model="cardIndex" :range="card">
						<view class="picker">
							{{cardIndex>-1?card[cardIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title redxing">证件号码</view>
					<input placeholder="请输入证件号码" name="input" id="idnumber" v-model="member.idnumber"
						@input="changeInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title redxing">称谓</view>
					<picker @change="selectGender" v-model="genderIndex" :range="gender">
						<view class="picker">
							{{genderIndex>-1?gender[genderIndex]:'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group" v-show="iscompany">
					<view class="title redxing">公司名称</view>
					<input placeholder="请输入公司名称" name="input" id="company" v-model="member.company"
						@input="changeInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title redxing">职务</view>
					<input placeholder="请填写具体职位" name="input" id="position" v-model="member.position"
						@input="changeInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title redxing">手机号码</view>
					<input placeholder="请输入手机号码" type="number" maxlength="11" name="input" id="phone"
						v-model="member.phone" @input="changeInput"></input>
				</view>
				<!-- <view class="cu-form-group" v-show="iscompany">
					<view class="title ">公司电话</view>
					<input placeholder="请输入公司电话" name="input" id="company_phone" v-model="member.company_phone"
						@input="changeInput"></input>
				</view> -->
				<view class="cu-form-group verification-code">
					<view class="title redxing">验证码</view>
					<input placeholder="请输入验证码" type="number" name="input" id="ver-code"
						v-model="verCode" @input="onIptVerCode"></input>
					<button class='cu-btn bg-orange shadow' @tap="getVerCode">获取验证码</button>
				</view>
				<view class="cu-form-group " v-show="iscompany">
					<view class="title redxing">行业选择</view>
					<picker @change="PickerChange" v-model="index" :range="picker">
						<view class="picker">
							{{index>-1?picker[index]:'请选择'}}
						</view>
					</picker>
				</view>

				<view class="cu-form-group" v-show="iscompany">
					<view class="title redxing">省份/市</view>
					<view>{{addressText}}</view>
					<button class='cu-btn bg-orange shadow' @tap="openAddres">请选择</button>
				</view>

				<view class="cu-form-group align-start" v-show="iscompany">
					<view class="title">详细地址</view>
					<textarea maxlength="-1" id="addrDetail" v-model="member.addrDetail" @input="changeInput"
						placeholder="请输入详细地址"></textarea>
				</view>
				<view class="address-tip">
					（如需接受纸质版邀请函，请提供完整及准确的邮寄地址。）
				</view>
				<view class="cu-form-group solid-bottom" v-show="iscompany">
					<view class="title redxing">电子邮箱</view>
					<input placeholder="请输入邮箱" name="input" id="email" v-model="member.email"
						@input="changeInput"></input>
				</view>
			</form>
			
			<view class="note-message">
				<view>
					如果您不同意我们采集、使用以上信息,我们将无法为您提供推送行业及展会动态。 
				</view>
				请您务必携带本人有效证件(身份证、港澳居民来往内地通行证、台湾居民来往大陆通行证、护照),电子版无效,未携带者将无法入场参观!商业广告:我们可能会将您的个人信息用于向您推送您感兴趣的商业广告。推送商业广告的方式包括但不限于拨打电话、发送子邮件、发送短信、邮寄资料等。您可以通过推送中的相关指订该商业广告。
			</view>
			
			<view class="agreement">
				
			</view>

			<view class="padding-xl ">
				<button class="cu-btn block  bg-orange lg " @tap="save">提交</button>
			</view>
		</view>


		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
	</view>

</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';

	export default {
		data() {
			return {
				iscompany: true,
				modalName: null,
				cityPickerValueDefault: [18, 6, 6],
				addressText: '',
				member: {
					name: '',
					phone: '',
					company_phone: '',
					company: '',
					idnumber: '',
					address: '',
					addrDetail: '',
					position: '',
					industry: ''
				},
				index: -1,
				cardIndex: -1,
				genderIndex: -1,
				picker: ['成品制作商', '配件制作商', '经销商', '设备安装、剧场、舞台工程', '媒体单位', '其他'],
				card: ['身份证'],
				gender: ['女士', '男士'],
				url: '/front/diansheng/api/',
				// 验证码
				verCode: '',
			}
		},

		onLoad(option) {
			var that = this;
			if (option.openid) {
				this.member.openid = option.openid
				this.getByOpenid(option.openid)
			}
			if (option.companyCode) {
				this.member.companyId = option.companyCode;
				this.iscompany = false;
			}

		},
		onShow() {


		},
		methods: {
			onConfirm(e) {
				this.addressText = e.label;
				this.member.address = e.label;
			},
			openAddres() {
				this.cityPickerValueDefault = [18, 6, 6]
				this.$refs.simpleAddress.open();
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			
			selectCardType(e) {
				this.cardIndex = e.detail.value
			},
			
			selectGender(e) {
				this.genderIndex = e.detail.value
			},
			
			changeInput(e) {
				this.member[e.target.id] = e.target.value;
			},
			onIptVerCode(e) {
				console.log(this.verCode)
			},
			// 获取验证码
			getVerCode() {
				
			},
			getByOpenid(openid) {
				uni.request({
					url: this.url + 'getMember.php',
					data: {
						openid: openid
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == '0' && res.data.data != null && res.data.data.length > 0) {

							this.member = res.data.data[0];
							this.addressText = res.data.data[0]['address'];
							this.index = this.picker.indexOf(res.data.data[0]['industry']);

							if (this.checkStringEmpty(res.data.data[0]['company_id'])) {
								this.iscompany = false;
							}
							//更新
							this.member.isUpdate = 1;
						}
					}
				});
			},
			save() {
				if (!this.check2()) {
					return;
				}
				let that = this;

				if (this.member.isUpdate != 1) {
					this.member.mid = Math.round(Math.random() * 999999);
				}

				uni.request({
					url: this.url + 'add.php',
					data: that.member,
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						if (res.data.code == '0') {
							uni.navigateTo({
								url: '../qrcode/qrcode?phone=' + that.member.phone + '&openid=' + this
									.member.openid + '&mid=' + this.member.mid + '&iscompany=' + this.iscompany
							});
						}
					}
				});
			},

			check2() {

				if (!this.checkStringEmpty(this.member.openid)) {
					uni.showToast({
						title: 'openid不存在',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.checkStringEmpty(this.member.name)) {
					uni.showToast({
						title: '名称不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				//带字母的身份证不可用X
				// if (!this.checkCardNo(this.member.idnumber)) {
				// 	uni.showToast({
				// 		title: '请输入正确的身份证号码',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				//验证的似乎把17也砍掉了，所以停用
				// if (!this.checkMobile(this.member.phone)) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号码',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				if (!this.checkStringEmpty(this.member.position)) {
					uni.showToast({
						title: '职务不能为空',
						icon: 'none',
						duration: 2000
					});
					return false;
				}

				if (this.iscompany) {
					if (!this.checkStringEmpty(this.member.company)) {
						uni.showToast({
							title: '公司不能为空',
							icon: 'none',
							duration: 2000
						});
						return false;
					}

					if (this.index == -1) {
						uni.showToast({
							title: '请选择行业',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					this.member.industry = this.picker[this.index]

					if (!this.checkStringEmpty(this.member.address)) {
						uni.showToast({
							title: '省份/市',
							icon: 'none',
							duration: 2000
						});
						return false;
					}

				}

				return true;
			}
		},

	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.logo {
		width: 652rpx;
		height: 154rpx;
		margin: 20rpx 49rpx;
	}

	.redxing::after {
		content: "* ";
		color: red;
	}

	.form-tip {
		color: #f37b1d;
		font-size: 15px;
		padding: 0 15px;
	}
	
	.verification-code{
		
	}
	
	.address-tip{
		color: #313131;
		box-sizing: border-box;
		padding: 0 15px;
		text-align: center;
		border-bottom: 0.5px solid #eee;
		padding-bottom: 10px;
	}
	
	.note-message{
		color: #313131;
		font-size: 14px;
		line-height: 22px;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 30px;
	}
	
	.note-message>view{
		text-indent: 28px;
	}
</style>
